<template>
  <div style="margin-top: 5px;">
    <div v-for="(button, index) in buttons" style="display: inline-block; margin-right: 5px;">
      <el-button :icon="button.icon" :type="button.type" circle plain
                 style="height: 40px; width: 40px; vertical-align: bottom;" @click="click(index)"></el-button>
      <div style="text-align: center;">
        <span style="font-size: 12px; color: #333333; letter-spacing: 0;">{{ button.label }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ResultButtons",
  props: ["value"],
  data() {
    return {
      result: "default",
      buttonData: [{
        type: "info",
        icon: "",
        label: "默认",
        result: "default"
      }, {
        type: "success",
        icon: "",
        label: "正常",
        result: "normal"
      }, {
        type: "warning",
        icon: "",
        label: "超标",
        result: "excess"
      }, {
        type: "danger",
        icon: "",
        label: "严重",
        result: "serious"
      }]
    }
  },
  computed: {
    buttons: {
      get() {
        for (let i = 0; i < 4; i++) {
          if (this.buttonData[i].result === this.value) {
            this.buttonData[i].icon = "el-icon-check"
            break
          }
        }
        return this.buttonData
      }
    }
  },
  methods: {
    change() {
      this.$emit("input", this.result)
    },
    click(index) {
      for (let i = 0; i < this.buttons.length; i++) {
        if (i === index) {
          this.buttons[i].icon = "el-icon-check"
          switch (i) {
            case 0:
              this.result = "default";
              break;
            case 1:
              this.result = "normal";
              break;
            case 2:
              this.result = "excess";
              break;
            case 3:
              this.result = "serious";
              break;
          }
        } else {
          this.buttons[i].icon = ""
        }
      }

      this.change()
    }
  }
}
</script>

<style scoped>

</style>
